<template>
	<view>
		<!-- 固定顶部的内容 -->
		<view class="fixed-top" :style="{ paddingTop: statusBarHeight + 'px' }">
			<top></top> <!-- 引入 top.vue 组件 -->
			<c-and-m></c-and-m> <!-- 引入 c-and-m.vue 组件 -->
		</view>

		<!-- 滚动区域 -->
		<scroll-view class="scroll-content" scroll-y="true" @scrolltolower="handleScrollToLower">
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<cards ref="cardsComponent" :trigger-update="triggerUpdate"></cards> <!-- 新增 props -->
		</scroll-view>
	</view>
</template>

<script>
	import Top from './top.vue'; // 导入 top.vue 组件
	import CAndM from './courses_and_messages.vue'; // 导入 courses_and_messages.vue 组件
	import Cards from './cards.vue';

	export default {
		components: {
			Top,
			'c-and-m': CAndM,
			Cards,
		},
		data() {
			return {
				title: '视频',
				dynamicFontSize: 14, // 默认字体大小
				statusBarHeight: 0, // 状态栏高度
				pages: {
					size: 1,
				},
				isLoading: true,
				triggerUpdate: false, // 增加 triggerUpdate，用来触发更新
			};
		},
		methods: {
			/**
			 * 获取视频相关内容
			 * @param {Number} page 当前分页数
			 */
			getVideoInfo(page) {
				this.isLoading = true;
				const url = `http://localhost:8006/user/getVideosInfo?page=${page}`;
				uni.showLoading({
					title: '数据加载中...', // 加载提示内容
					mask: true, // 遮罩层，防止点击其他地方
				});
				uni.request({
					url: url, // 请求接口地址
					method: 'GET', // 使用 GET 请求
					success: (res) => {
						console.log('返回的数据:', res); // 打印响应数据
						uni.hideLoading(); // 隐藏加载提示
						this.isLoading = false;
						if (res.data && res.data.data && Array.isArray(res.data.data)) {
							// 使用 Vuex 的 mutation 更新数据
							this.$store.commit('setVideosAbout', [
								...this.$store.state.videosAbout,
								...res.data.data,
							]);
							// 成功后触发 Cards 的更新
							this.triggerUpdate = !this.triggerUpdate;
						} else {
							console.error('返回的数据格式不正确:', res.data.data);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
						uni.hideLoading(); // 隐藏加载提示
						this.isLoading = false;
					},
				});
			},
		},
		onUnload() {
			// 清理所有正在进行的异步操作
			this.isLoading = false; // 确保所有加载标志位都被复位
		},

		onReachBottom() {
			if (!this.isLoading) {
				this.pages.size += 1;
				console.log('到底部触发了', this.pages.size);
				// 调用获取视频数据的方法
				this.getVideoInfo(this.pages.size);
			}
		},
		onLoad() {
			// 获取系统信息，动态计算状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight + 10;

			// 动态计算字体大小
			const screenWidth = systemInfo.windowWidth;
			const screenHeight = systemInfo.windowHeight;
			const minSide = Math.min(screenWidth, screenHeight);
			this.dynamicFontSize = minSide * 0.07; // 计算字体大小为最短边的7%

			// 初始加载时清空 videosAbout
			this.$store.state.videosAbout = [];

			// 加载第一页的视频数据
			this.getVideoInfo(this.pages.size);

			console.log('初始分页:', this.pages.size);
		},
	};
</script>

<style scoped>
	.page-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
	}

	.fixed-top {
		width: 100%;
		background-color: #ffffff;
		z-index: 10;
		position: fixed;
		top: 0;
	}

	.scroll-content {
		flex: 1;
		width: 100%;
		margin-top: 100rpx;
	}

	.bottom-placeholder {
		text-align: center;
		line-height: 100px;
		color: #555;
	}
</style>
